<template>
	<view class="container">
		<!-- 轮播图 -->
		<u-swiper
				:list="list6"
				@change="e => currentNum = e.current"
				:autoplay="true"
				indicatorStyle="right: 20px"
		>
			<view
					slot="indicator"
					class="indicator-num"
			>
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
			</view>
		</u-swiper>
		
		<!-- content -->
		<view class="content-box">
			<view class="content">
				<view class="content-title">
					推客联盟推客联盟推客联盟推客联盟
					推客联盟推客联盟推客联盟推客联盟
					推客联盟推客联盟推客联盟推客联盟
					推客联盟推客联盟推客联盟推客联盟
				</view>
				<view class="content-price">
					<view class="content-price-left">
						<view class="">
							￥111.11
						</view>
						<text>￥123.00</text>
					</view>
					<view class="content-price-right">
						推客联盟推客联盟推客联盟推客联盟
					</view>
				</view>
				<view class="content-bottom">
					<view class="content-bottom-item">
						<view class="">
							￥12.12
						</view>
						<text>佣金</text>
					</view>
					<view class="content-bottom-item">
						<view class="">
							￥12.12
						</view>
						<text>佣金比</text>
					</view>
					<view class="content-bottom-item">
						<view class="">
							￥12.12
						</view>
						<text>优惠券</text>
					</view>
				</view>
			</view>
			
			<view class="details-box">
				<view class="details-title">
					图文详情
				</view>
			</view>
			
		</view>
		
		
		<view class="footer-bottom">
			<view class="btn" @click="clickFooter">
				立即获取
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
	        data() {
	            return {
	                list6: [
	                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
	                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	                ],
					currentNum: 0
	            }
	        },
			methods: {
				clickFooter(){
					uni.navigateTo({
						url:"/pages/onlineRetailers/interlinkage/index"
					})
				}
			}
	    }
</script>

<style lang="scss">
    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
	
	.container{
		height: 100vh;
		font-size: 26rpx;
		background-color: #f1f1f1;
		padding-bottom: 130rpx;
		box-sizing: border-box;
		/deep/ .u-swiper{
			// height: 380rpx !important;
		}
		/deep/ .u-swiper__wrapper{
			height: 100% !important;
		}
		/deep/ image{
			height: auto !important;
		}
		.content-box{
			margin: 30rpx;
			.content{
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				background: #fff;
				.content-title{
					line-height: 40rpx;
					font-size: 28rpx;
					overflow: hidden; //超出的文本隐藏
					display: -webkit-box;
					-webkit-line-clamp: 2; // 超出多少行
					-webkit-box-orient: vertical;
				}
				.content-price{
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;
					.content-price-left{
						display: flex;
						align-items: center;
						view{
							color: red;
							font-size: 32rpx;
							font-weight: 600;
						}
						text{
							color: #626c6e;
							font-size: 20rpx;
							text-decoration: line-through;
						}
					}
					.content-price-right{
						width: 50%;
						overflow:hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow:ellipsis;
					}
				}
				.content-bottom{
					display: flex;
					background: #f1f1f1;
						border-radius: 10rpx;
					.content-bottom-item{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex: 1;
						padding: 30rpx 0;
						view{
							font-size: 30rpx;
							color: red;
							margin-bottom: 10rpx;
						}
						text{
							color: #626c6e;
						}
					}
				}
			}
			.details-box{
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				background: #fff;
				margin-top: 30rpx;
				.details-title{
					font-size: 32rpx;
				}
			}
		}
		.footer-bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			.btn{
				font-size: 32rpx;
				height: 100rpx;
				line-height: 100rpx;
				width: 90%;
				margin-left: 5%;
				color: #fff;
				text-align: center;
				background-color: #0f82f8;
				border-radius: 200rpx;
				margin-top: 10rpx;
			}
		}
		
	}
	
</style>